<template>
<div>
    <div class="container">
        <!-- 主容器 -->
        <div class="mainbody">
            <img src="https://upload.jianshu.io/admin_banners/web_images/4894/23ecc55accf5c6a6c9910be966c125853d1f04a5.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt="" class="topimg">
        <!-- 热点新闻 -->
        <div class="hotpoint">
           <div class="hotpointTitle">热点文章</div>
            <div class="hotpointItem" v-for="item in hotpointList" :key="item.title">
                <a href="#"><span>{{item.title}}</span></a>
                <p>{{item.zhaiyao}}</p>
                <div class="hotpoint_bottom">
                    <a>limsenj</a>
                    <i class="el-icon-s-comment">0</i>
                    <i class="el-icon-star-on">12</i>
                </div>
                 <hr>
            </div>
           
        </div>
        <!-- 热点商品 -->
        <div class="hotpointTitle">热点商品</div>
            <div class="goods-list">
            <a :href="item.url" class="goods-item" v-for="item in hotGoods" :key="item.id" tag="div" target="_blank">
                <img :src="item.img_url" alt="">
                <h1 class="goods-title">{{item.title}}</h1>
                <div class="goods-info">
                    <p class="goods-price">
                        <span class="new">￥{{item.sell_price}}</span>
                        <span class="old">￥{{item.market_price}}</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩{{item.stock_quantity}}件</span>
                    </p>
                </div>
            </a>
            </div>
            <!-- 分界线 -->
        <div class="hotpointTitle">热门活动</div>

        </div>
        <!-- 左边容器 -->
        <div class="leftaside"> 
            <div style="margin-bottom:220px;">
            <!-- <img src="https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png" alt="">
            <img src="https://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png" alt="">
            <img src="https://cdn2.jianshu.io/assets/web/banner-s-5-4ba25cf5041931a0ed2062828b4064cb.png" alt="">
            <img src="https://cdn2.jianshu.io/assets/web/banner-s-6-c4d6335bfd688f2ca1115b42b04c28a7.png" alt=""> -->
            </div>

            <div class="erweimaarea">
                <img src="https://cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png" alt="">
                <div>
                <span>关注微信公众号 ></span>
                <span>随时随地发现和创作内容</span>
                </div>
            </div>
            <div class="recommend">
                <div class="recommendTitle">
                    <span>推荐作者</span>
                    <span>
                        <i class="el-icon-refresh"></i>
                        换一批
                    </span>
                </div>
                <div class="recommendItem" v-for="item in recommendList" :key="item.user">
                    <div class="recommendItemTitle1">
                    <el-avatar :size="43" :src="item.avatar"></el-avatar>
                    <div class="recommendItemTitle">
                        <span>{{item.user}}</span>
                        <span>写了{{item.count}}字 · {{item.like}}喜欢</span>
                    </div>
                    </div>
                    <div class="recommendBtn">+关注</div>
                </div>
                <router-link to="/author" target="_blank"><div class="seeAll" ><el-button>查看全部 ></el-button></div>
                </router-link>
            </div>
        </div>
    </div>
        
</div>
</template>

<script>
    // create(){
    //     axios.get('//')
    // }

export default {
    data() {
        return {
            hotpointList:[
                {title:'张静初：从演技派女神到女版陈冠希；从演员的骄傲到男导演收割机',zhaiyao:'1月10日就是上个周末，张静初出席了“国潮盛典”，她穿着一身蓝色的衬衣裙仿佛出水芙蓉一般，妩媚的v领造型，不经意间展现的就是让人最心动的美丽。 ...'},
                {title:'国产之光Tea,好看又能打Markdown编辑器',zhaiyao:'一句话评价：易用、主打插件、颜值和同步功能的Markdown编辑器 跨平台支持情况：Windows和macOS，无网页版和移动端 体验地址：ht...'},
                {title:'vue吸顶和平滑效果及其他问题记录',zhaiyao:'需求：官网内部有个水平导航条，当向下滑动到导航条置顶时需要固定在顶部。实现方法：...'},
                // {title:'',zhaiyao:''},
            ],
            hotGoods:[
                 {id:1,title:'现挖新鲜红薯板栗红薯沙地红蜜薯农家自种小红薯山芋番薯地瓜10斤',
                url:"https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.1.1c1a779fnr0CqT&id=559387428719&skuId=4611686577814816623&user_id=3403547668&cat_id=2&is_b=1&rn=a1ac4a7e011bd01da5bca0ab1a2a3896",
                click:13215,img_url:"https://img.alicdn.com/bao/uploaded/i2/3403547668/TB2x8PsejuhSKJjSspjXXci8VXa_!!3403547668.jpg",
                sell_price:2199,market_price:2399,stock_quantity:199},
                {id:2,title:'铁皮石斛霍山野生靓品农产品云南无渣干',
                url:"https://detail.tmall.com/item.htm?spm=a220m.1000858.0.0.65dd325e2ueSeA&id=610830907756&skuId=4291792364371&is_b=1&cat_id=2&q=%25CC%25FA%25C6%25A4+%25CA%25AF%25F5%25FA+%25D2%25B0%25C9%25FA",
                click:525,img_url:"https://img.alicdn.com/imgextra/i3/798310066/O1CN01vABj341CMGitAMVJw_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:58.88,market_price:199,stock_quantity:5000},
                {id:3,title:'2斤包顺丰 鱼皮饺子 手工鱼册火锅食材',
                url:"https://item.jd.com/27569686500.html",
                click:5215,img_url:"https://img.alicdn.com/imgextra/i1/13298578/TB2kVMyXBUSMeJjSszcXXbnwVXa_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:28.80,market_price:59,stock_quantity:199},
                {id:4,title:'灵芝正品农户自产500 g原林参茸东北袍',
                url:"http://www.ppa7.com/p/10128334587/",
                click:515,img_url:"https://img.alicdn.com/imgextra/i1/16572215/O1CN01QLeiIJ1SEVoOa7Tfn_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:252,market_price:399,stock_quantity:199},
                {id:5,title:'新鲜紫薯冰淇淋红薯一点红番薯现挖农家',
                url:"https://item.jd.com/51439285130.html",
                click:535,img_url:"https://img.alicdn.com/imgextra/i1/122186082/O1CN01hvUeYe1unbRoQnihh_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:24.80,market_price:33,stock_quantity:199},
                {id:6,title:'西双版纳老品种带皮甜糯粘玉米棒',
                url:"https://item.jd.com/53465167119.html",
                click:1215,img_url:"https://img.alicdn.com/imgextra/i2/121076661/TB2v1_VtVGWBuNjy0FbXXb4sXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:51.90,market_price:60,stock_quantity:199},
                {id:7,title:'2500g净含量壳皮大麦粒大麦茶原料发芽食用农产品',
                url:"https://item.jd.com/64637761387.html",
                click:1215,img_url:"https://img12.360buyimg.com/n7/jfs/t1/105403/4/8870/284794/5e071b28E90731c61/3fd7ee7611882c85.jpg",
                sell_price:28.00,market_price:40,stock_quantity:199},
                {id:8,title:'绿豆沂蒙新货自种五谷杂粮农产品发绿豆芽5斤装毛绿豆',
                url:"https://item.jd.com/66198990372.html",
                click:1215,img_url:"https://img12.360buyimg.com/n7/jfs/t1/94797/16/14267/106708/5e638e58E1bc207bc/3e245adcd8824aaf.jpg",
                sell_price:96.00,market_price:120.00,stock_quantity:1},
            ],
            recommendList:[
                {avatar:'https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',user:'梅拾樱',count:'273.9k',like:'30.2k'},
                {avatar:'https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',user:'卢克平日记',count:'876.2k',like:'3.1k'},
                {avatar:'https://upload.jianshu.io/users/upload_avatars/14715425/e0668349-8c75-43db-8a9d-c388e5f00d0d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',user:'简书钻首席小管家',count:'301.8k',like:'165.7k'},
                {avatar:'https://upload.jianshu.io/users/upload_avatars/13213889/44b5d4d5-548c-43a6-bbd1-4387e526450e.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',user:'无限猴子',count:'439.9k',like:'2.3k'},
                {avatar:'https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',user:'卢璐说',count:'1451k',like:'30.1k'},
            ],
        }
    },
}
</script>
<style scoped>
.container{
    width: 985px;
    /* background-color: #2a4a6a; */
    height: 500px;
    display: flex;
    justify-content: space-between;
}
.topimg{
    margin: 15px 0;
    width: 625px;
    border-radius: 2%;
}
.mainbody{
    width: 625px;
}
.leftaside{
    margin-top: 10px;
    width: 270px;
    height: 200px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
}
.leftaside img{
    width: 275px;
    margin: 5px 0;
}

.hotpointTitle{
font-size: 25px;
font-weight: bold;
border-bottom: solid 3px #999;
margin-bottom: 20px;
}
.hotpointItem{
    color: black;
}
.hotpointItem span{
    font-size: 18px;
    color: black;
    font-weight: bold;
}
.hotpointItem span:hover{
    font-size: 18px;
    color: black;
    /* border-bottom:black solid 1px ; */
}
.hotpointItem p{
    font-size: 13px;
    color: #999;
}
.hotpoint_bottom{
    display: flex;
    justify-content: space-around;
    width: 150px;
    align-items: center;
    height: 13px;
    color: #999;
    font-size: 14px;
}
/*  */
.goods-list{
       display: flex;
       flex-wrap:wrap; 
       /* border: 1px solid red; */
       position: relative;
       /* padding: 7px; */
}
.goods-list a{
    text-decoration: none;
    color: black;
}
.goods-list a:hover{
    color: #7e7e7e;
}
.goods-item{
        width: 23%;
        border: 1px solid #ccc;
        box-shadow: 0 0 8px #ccc;
        margin: 6px 6px;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 180px;
    }
    .goods-title{
        -webkit-transform:scale(0.95);
        margin: 0;
        font-size: 10px;
        padding: 2px 0px;
         
    }
    img{
        width: 100%;
    }
    .goods-info{
        background-color: #eee;
    }
    p{
        margin: 0px;
        padding-bottom: 2px;
    }
    .new{
        color: red;
        font-size: 14px;
        font-weight: bold;
    }
    .old{
        font-size: 10px;
        text-decoration: line-through;
        padding-left: 10px;
        -webkit-transform:scale(0.7);
    }
    .sell{
        display: flex;
        justify-content: space-between
    }
    .sell span{
        font-size: 10px;
        -webkit-transform:scale(0.8);
    }
/*  */
.erweimaarea{
    height: 100px;
    display: flex;
    border: #eee solid 1px;
    padding: 10px;
    border-radius: 3%;
    cursor: pointer;
    align-items: center;
}
.erweimaarea img{
    width: 60px;
}
.erweimaarea div{
    display: flex;
    flex-direction: column;
    text-align: start;
    margin-left: 10px;
}
.erweimaarea div span{
    color: #999;
    font-size: 12px;
}
.erweimaarea div :first-child{
    color:black;
    font-size: 16px;
}
.recommend{
    margin-top: 35px;
}
.recommendTitle{
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 14px;
}
.recommendItem{
    display: flex;
    margin-top: 13px;
    width: 270px;
    justify-content: space-between;
}
/* .el-avatar{
    border: #999 solid 0.0001px;
    padding: 2px;
    color: #fff;
} */
.recommendItemTitle1{
    display: flex;
}
.recommendItemTitle{
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #999;
    margin-left: 10px;
}
.recommendItemTitle :first-child{
    color: black;
    font-size: 14px;
}
.recommendBtn{
    position: relative;
    right: 0;
    color: #42C02E;
    font-size: 13px;
    cursor: pointer;
}
.seeAll .el-button{
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
    background-color: #F7F7F7;
}
</style>
